<template>
	<view class="pages">
		<!-- 头部搜索开始 -->
		<view class="wapper-wapper">
			<view class="search-wapper">
				<view class="search-icon-box">
					<image src="../../static/icos/search.png" mode="widthFix" class="search-icon"></image>
				</view>
				<view class="search-input-box">
					<input 
						type="text"
						placeholder="找预告" 
						confirm-type="search"
						@input="handleInput"
						@confirm="handleConfirm"
					/>
				</view>
			</view>
		</view>
		
		<!-- 头部搜索结束 -->
		
		<!-- 图片列表开始 -->
		<view class="imageList-wapper">
			<view class="" v-for="(item,index) in nineList" :key="index">
				<image :src="item.cover" mode="widthFix" class="imageList-image" @click="handleImage(item.id)"></image>
			</view>
		</view>
		<!-- 图片列表结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nineList:[]	,//默认的九个图片数组
				storageValue:''	,//存储文本框输入的内容
				page:1		,//页数
				pageSize:15	,//每页多少数据
				newList:[]
			}
		},
		methods: {
			/* 定义一个获取预告详情页基础的9个图片数据 */
			getNinList(){
				var resUrl = this.ListUrl
				uni.request({
					method: 'POST',
					url: resUrl + 'search/list?keywords=&page=&pageSize=&qq=lee77789087',
					success:(res)=> {
						this.nineList = res.data.data.rows

					}
				})
				
			},
			/*定义查询时获取数据的方法 */
			getSearchList(keywords,page,pageSize){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				var resUrl = this.ListUrl
				uni.request({
					method: 'POST',
					url: resUrl + `search/list?keywords=${keywords}&page=${page}&pageSize=${pageSize}&qq=lee77789087`,
					success:(res)=> {
						console.log(res)
						
						this.nineList = [...this.nineList,...res.data.data.rows]
						console.log(this.newList)
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			getSearchList1(keywords,page,pageSize){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				var resUrl = this.ListUrl
				uni.request({
					method: 'POST',
					url: resUrl + `search/list?keywords=${keywords}&page=${page}&pageSize=${pageSize}&qq=lee77789087`,
					success:(res)=> {
						this.nineList = res.data.data.rows
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			/* 文本框输入内容时触发的事件 */
			handleInput(e){
				this.storageValue = e.detail.value
			},
			handleConfirm(){
				var keywords = this.storageValue
				var page = this.page
				var pageSize = this.pageSize
				this.nineList=[]
				page = 1
				this.page = page
				this.getSearchList1(keywords,page,pageSize)

			},
			/* 点击图片路由跳转事件 */
			handleImage(e){
				uni.navigateTo({
					url:`../movieDetailsPage/movieDetailsPage?trailerId=${e}`
				})
			}
		},
		/* 页面加载完毕时候执行的页面生命周期函数 */
		onLoad() {
			this.getNinList()
			
		},
		/* 页面触底声明周期函数 */
		onReachBottom() {
			var keywords = this.storageValue
			var pageSize = this.pageSize
			var page = this.page
			this.page = page +1
			console.log(this.page)
			if(page > 4){
				uni.showToast({
					title:"没有更多了",
					mask:true
				})
				return
			}
			this.getSearchList(keywords,page,pageSize)
		}
	}
</script>

<style>
/* 头部搜索预告样式开始 */
	.wapper-wapper{
		position: fixed;
		z-index: 999;
		left: 0;
		background-color: #f8f8f8;
		width: 100%;
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		top: 0;
		left: 0;
		/* #endif */
		height: 88rpx;
	}
	.search-wapper {
		display: flex;
		padding: 5rpx 10rpx;
		background-color: #eaeaea;
		width: 680rpx;
		height: 60rpx;
		margin: 0 auto;
	}

	.search-icon-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-icon {
		width: 40rpx;
	}
	
	.search-input-box{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
	}
/* 头部搜索预告样式结束 */

/* 页面主体数据列表开始 */
	.imageList-wapper{
		margin-top: 90rpx;
		padding: 30rpx 28rpx;
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
	}
	.imageList-image{
		width: 210rpx;
		margin-right: 34rpx;
		margin-bottom: 30rpx;
	}
/* 页面主体数据列表结束 */
</style>
